<template>
  <div class="page-miH page-bgBack">
    <rTitle :type="'center'" :tit="'人才库'" />
    <div class="r-talent-box">
      <div class="xq-form-wrapper">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-input-search v-model="jobSeekerName" placeholder="搜索求职者名字" style="width: 100%" allowClear @search="onSearch" />
          </a-col>
          <a-col :span="6">
            <a-select label="性别" allow-clear v-model="gender" placeholder="请选择性别" style="width: 100%" @change="onSearch">
              <a-select-option value="男">男</a-select-option>
              <a-select-option value="女">女</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <a-input-search label="手机号" allow-clear v-model="phone" placeholder="请输入手机号" style="width: 100%" @search="onSearch" />
          </a-col>
          <a-col :span="6">
            <a-cascader
              :options="positionTypes"
              style="width: 100%"
              :field-names="{ label: 'name', value: 'id', children: 'childList' }"
              :displayRender="displayRender"
              placeholder="请选择意向岗位"
              @change="onSearch"
              v-model="intentionJob"
              :show-search="{ filter }"
            />
          </a-col>
          <a-col :span="6" class="mt16">
            <city v-model="addressCode" placeholder="请选择工作城市" style="width: 100%" :level="2" @change="onCitySearch" />
          </a-col>
          <a-col :span="6" class="mt16">
            <a-input-search allow-clear v-model="createUserName" placeholder="请输入创建来源" style="width: 100%" @search="onSearch" />
          </a-col>
          <a-col :span="6" class="mt16">
            <a-select
              label="在职状态"
              allow-clear
              v-model="serviceStatus"
              placeholder="请选择在职状态"
              style="width: 100%"
              @change="onSearch"
            >
              <a-select-option value="在职">在职</a-select-option>
              <a-select-option value="未在职">未在职</a-select-option>
            </a-select>
          </a-col>
        </a-row>
        <div
          style="
            display: flex;
            font-size: 14px;
            font-weight: 40;
            color: #636363;
            padding-bottom: 32px;
            border-bottom: 1px solid #e8e8e8;
            margin-top: 32px;
          "
        >
          <div>工作经验:</div>
          <div
            style="margin-left: 20px; cursor: pointer"
            :class="colHighlighted === index ? 'colpri' : ''"
            v-for="(item, index) in experienceList"
            :key="index"
            @click="experienceChange(item, index)"
          >
            {{ item.label }}
          </div>
          <div style="margin-left: 20px" class="custom1" :class="colHighlighted === 5 ? 'colpri' : ''" @click="zdy">自定义</div>
          <div style="display: flex" v-if="isCustom">
            <a-input-number :min="0" v-model="startYear" placeholder="请输入" style="width: 120px; margin-top: -4px; margin-left: 20px" />
            <div style="margin-left: 12px">-</div>
            <a-input-number
              :min="startYear || 0"
              v-model="endYear"
              placeholder="请输入"
              style="width: 120px; margin-top: -4px; margin-left: 12px"
            />
            <a-button type="link" @click="experienceChange()" style="margin-top: -4px">确认</a-button>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 24px">
          <div></div>
          <div>
            <a-button class="entry" type="link" @click="$router.push({ path: 'entry' })"> <a-icon type="qrcode" />扫码录入 </a-button>
            <a-button class="mr12" type="primary" @click="$router.push({ name: 'talentImports' })">导入员工数据</a-button>
            <a-button type="primary" @click="$router.push({ name: 'peopleAdd' })">新建人才</a-button>
          </div>
        </div>
        <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
          <a-table :scroll="{ x: columns.length * 150 }" :pagination="false" :bordered="false" :dataSource="tableData" :columns="columns">
            <!-- eslint-disable-next-line prettier/prettier -->
            <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
              <div :key="index">
                <div v-if="col.dataIndex === 'name'" class="table-item" @click="onInfo(record)">
                  <div class="table-tr">
                    <div class="t-row" style="width: 300px; flex-shrink: 0">
                      <div class="t-col t-name" style="margin-bottom: 12px">
                        <a-tooltip placement="top">
                          <template slot="title" v-if="record.jobSeekerName">
                            <span>{{ record.jobSeekerName }}</span>
                          </template>
                          <div class="t-name-font">{{ record.jobSeekerName }}</div>
                        </a-tooltip>

                        <div class="t-desc">
                          <div class="t-name-address">{{ record.addressCode ? getAddressCode(record.addressCode) : "" }}</div>
                          <span style="padding: 0 4px" v-if="record.addressCode">|</span>
                          <span style="padding: 0 4px">{{ record.sex ? (record.sex === "男" ? "男" : "女") : "" }}</span>
                          <span style="padding: 0 4px" v-if="record.sex && record.birthday">|</span>
                          <span style="padding: 0 4px">{{
                            record.birthday ? (getBirthday(record.birthday) > 0 ? `${getBirthday(record.birthday)}岁` : "0岁") : ""
                          }}</span>
                        </div>
                      </div>
                      <div class="t-col">
                        <a-icon type="phone" theme="filled" style="color: #bfbfbf" />
                        {{ record.phone }}
                      </div>
                    </div>
                    <div class="t-row" style="flex: 1">
                      <div class="t-col display">
                        <div class="t-label">意向岗位:</div>
                        <div class="t-content">{{ record.intentionJob ? record.intentionJob.split("*")[1] : "" }}</div>
                      </div>
                      <div class="t-col display">
                        <div class="t-label">工作经验:</div>
                        <div class="t-content overflows">{{ record.workYears ? `${record.workYears}年` : "" }}</div>
                      </div>
                    </div>
                    <div class="t-row" style="width: 200px; flex-shrink: 0">
                      <div class="t-col display">
                        <div class="t-label">创建来源:</div>
                        <div class="t-content t-remark">{{ record.createUserName }}</div>
                      </div>
                    </div>
                  </div>
                  <div style="display: flex; align-items: center; width: 200px; flex-shrink: 0">
                    <a-button size="small" type="link" @click.stop="doInfo(record)">一键投递</a-button>
                    <a-button size="small" type="link" @click.stop="addRecord(record)">添加跟进</a-button>
                    <a-dropdown-button placement="bottomLeft" class="dropbtn">
                      <a-menu slot="overlay">
                        <a-menu-item @click="onInfo(record)">查看详情</a-menu-item>
                        <a-menu-item>
                          <a-popconfirm
                            :title="`确认要删除吗？`"
                            ok-text="确认"
                            cancel-text="取消"
                            @confirm="onDelJobSeekers(record.talentPoolId)"
                          >
                            <div>删除</div>
                          </a-popconfirm>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown-button>
                  </div>
                </div>
              </div>
            </template>
          </a-table>

          <div class="xq-form-content-pagination">
            <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
            <a-pagination
              v-model="pageNo"
              :page-size="pageSize"
              :total="total"
              :show-size-changer="true"
              :show-quick-jumper="true"
              :page-size-options="['10', '20', '50', '100']"
              @change="onPageChange"
              @showSizeChange="onPageSizeChange"
            />
          </div>
        </a-spin>
      </div>
    </div>
    <a-modal v-model="addVisible" title="添加跟进记录" @ok="onAddOk">
      <a-form-item required label="跟进人" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-select
          v-model="recordCur"
          :options="adminUsers"
          showSearch
          :filterOption="filterOption"
          placeholder="请选择跟进人"
          style="width: 100%"
        ></a-select>
      </a-form-item>
      <a-form-item required label="跟进方式" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-select v-model="recordMed" :options="followTypeList" placeholder="请选择跟进方式" style="width: 100%"></a-select>
      </a-form-item>
      <a-form-item required label="跟进内容" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-textarea v-model="recordCon" placeholder="请填写跟进内容" style="width: 100%"></a-textarea>
      </a-form-item>
    </a-modal>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import moment from "moment";
import rTitle from "../../component/rTitle";
import { mapState } from "vuex";
import { AreaPicker as city } from "xqjr-plugin-common";
import { getTalentPoolInfo, getCompanyUnits, delJobSeekers } from "./api";
import { followUpAddReq } from "../../api";
import { followTypeList } from "../../funcs";
export default {
  components: {
    rTitle,
    city
  },
  data() {
    return {
      followTypeList,
      recordCur: undefined,
      recordMed: undefined,
      recordCon: "",
      tempRecord: null,
      addVisible: false,
      colHighlighted: 0,
      spinning: false,
      visible: false,
      isCustom: false,
      addressCode: "",
      createUserName: "",
      columns: [
        {
          title: "名次",
          dataIndex: "name",
          scopedSlots: { customRender: "name" }
        }
      ],
      img: require("@/assets/recruitment/rwork.png"),
      companyIdArr: [],
      tableData: [{ name: 1 }],
      jobSeekerName: "",
      phone: "",
      gender: undefined,
      serviceStatus: undefined,
      experienceList: [
        { label: "不限", value1: undefined, value2: undefined },
        { label: "暂无工作经验", value1: 0, value2: 0 },
        { label: "1-3年", value1: 1, value2: 3 },
        { label: "3-5年", value1: 3, value2: 5 },
        { label: "5-10年", value1: 5, value2: 10 }
      ],
      socCity: undefined,
      socCityName: "",
      endYear: undefined,
      startYear: undefined,
      companyUnitName: undefined,
      total: 0,
      intentionJob: undefined,
      pageNo: 1,
      pageSize: 20,
      mjson: {},
      talentPoolId: ""
    };
  },
  async created() {
    this.onGetTalentPoolInfo();
    this.onGetCompanyUnits();
    this.$store.commit("recruitment/talentPoolTempId", "");
    this.$store.commit("recruitment/isCancel", null);
    Cookies.set("sidebarStatus", 0);
  },
  computed: {
    ...mapState(["common", "recruitment"]),
    adminUsers() {
      return this.recruitment.adminUsers;
    },
    positionTypes() {
      return this.recruitment.positionTypes;
    }
  },
  mounted() {},
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    onAddOk() {
      if (this.recordCur && this.recordMed && this.recordCon) {
        followUpAddReq({
          talentPoolId: this.tempRecord.id,
          followUser: this.recordCur,
          followType: this.recordMed,
          followContent: this.recordCon
        })
          .then((res) => {
            this.$message.success("添加成功");
            this.addVisible = false;
          })
          .catch((err) => {
            console.log("followUpAddReq", err);
          });
      } else {
        this.$message.error("请填写完整信息");
      }
    },
    addRecord(record) {
      this.tempRecord = record;
      this.addVisible = true;
    },
    filter(inputValue, path) {
      return path.some((option) => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    },
    getBirthday(strBirthday) {
      var returnAge;
      var strBirthdayArr = strBirthday.split("-");
      var birthYear = parseInt(strBirthdayArr[0]);
      var birthMonth = parseInt(strBirthdayArr[1]);
      var birthDay = parseInt(strBirthdayArr[2]);
      var d = new Date();
      var nowYear = d.getFullYear();
      var nowMonth = d.getMonth() + 1;
      var nowDay = d.getDate();
      if (nowYear === birthYear) {
        returnAge = 0; // 同年 则为0周岁
      } else {
        var ageDiff = nowYear - birthYear; // 年之差
        if (ageDiff > 0) {
          if (nowMonth === birthMonth) {
            var dayDiff = nowDay - birthDay; // 日之差
            if (dayDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          } else {
            var monthDiff = nowMonth - birthMonth; // 月之差
            if (monthDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          }
        } else {
          returnAge = -1; // 返回-1 表示出生日期输入错误 晚于今天
        }
      }
      return returnAge; // 返回周岁年龄
    },
    getAddressCode(val) {
      if (val) {
        const arr = val.split(",");
        let city = "";
        let city1 = "";
        if (arr.length === 2) {
          this.common.cityList.map((z) => {
            if (z.id === Number(arr[0])) {
              city = z.name;
              city1 = z.children ? z.children.find((z) => z.id === Number(arr[1])).name : null;
            }
          });
          return `${city}${city1 || ""}`;
        } else {
          this.common.cityList.map((z) => {
            if (z.id === Number(arr[0])) {
              city = z.name;
            }
          });
          return `${city}`;
        }
      } else {
        return "";
      }
    },
    zdy() {
      this.startYear = null;
      this.endYear = null;
      this.isCustom = true;
      this.colHighlighted = 5;
      this.onSearch();
    },
    onCitySearch() {
      if (this.addressCode.value.length > 0) {
        const value = this.addressCode.value;
        this.addressCode = value[value.length - 1].toString();
      } else {
        this.addressCode = "";
      }
      this.onSearch();
    },
    experienceChange(e, index) {
      console.log(e);
      if (e) {
        this.colHighlighted = index;
        this.startYear = e.value1;
        this.endYear = e.value2;
        this.isCustom = false;
      }
      this.onSearch();
    },
    moment,
    init() {
      this.jobSeekerName = "";
      this.phone = "";
      this.gender = undefined;
      this.socCity = undefined;
      this.createUserName = "";
      this.companyUnitName = undefined;
      this.total = 0;
      this.pageNo = 1;
      this.onGetTalentPoolInfo();
    },
    async onGetTalentPoolInfo() {
      try {
        this.spinning = true;
        const { data } = await getTalentPoolInfo({
          jobSeekerName: this.jobSeekerName,
          phone: this.phone,
          intentionJob: this.intentionJob && this.intentionJob.length !== 0 ? this.intentionJob[this.intentionJob.length - 1] : undefined,
          sex: this.gender ? this.gender : "",
          serviceStatus: this.serviceStatus ? this.serviceStatus : "",
          createUserName: this.createUserName,
          companyUnitName: this.companyUnitName,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          workYearsStart: this.startYear,
          workYearsEnd: this.endYear,
          addressCode: this.addressCode,
          "orders[0].property": "gmtCreate",
          "orders[0].desc": true
        });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        this.tableData = [];
        this.total = 0;
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetTalentPoolInfo();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetTalentPoolInfo();
    },
    async onGetCompanyUnits() {
      try {
        const { data } = await getCompanyUnits({
          pageNo: 1,
          pageSize: 1000
        });
        this.companyIdArr = data.entities;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.socCity = value[value.length - 1].toString();
        if (label.length && label.length === 3) {
          this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        } else if (label.length && label.length === 2) {
          this.socCityName = label[0] + "/" + label[1];
        }
      } else {
        this.socCity = "";
        this.socCityName = "";
      }
    },
    async onDelJobSeekers(id) {
      try {
        await delJobSeekers(id);
        this.$notification.success({ message: "操作成功" });
        this.init();
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    displayRender({ labels }) {
      return labels[labels.length - 1];
    },
    doInfo(e) {
      const query = {
        mode: "onekey"
      };
      if (e.talentPoolId) query.talentPoolId = e.talentPoolId;
      if (e.deliverRecordId) query.deliverRecordId = e.deliverRecordId;
      if (e.principalName) query.principalName = e.principalName;
      this.$router.push({
        name: "talentMsg",
        query
      });
    },
    onInfo(e) {
      const query = {};
      if (e.talentPoolId) query.talentPoolId = e.talentPoolId;
      if (e.deliverRecordId) query.deliverRecordId = e.deliverRecordId;
      if (e.principalName) query.principalName = e.principalName;
      this.$router.push({
        name: "talentMsg",
        query
      });
    },
    onSearch() {
      this.visible = false;
      this.pageNo = 1;
      this.onGetTalentPoolInfo();
    },
    onClose() {
      this.visible = false;
      this.init();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .ant-table-tbody {
  tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) {
    td {
      background: #fff;
    }
  }
}
::v-deep .ant-table-row {
  td {
    padding: 0;
    border-bottom: none;
  }
}
.table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 12px;
}
::v-deep .dropbtn {
  .ant-btn {
    border: none;
    background: transparent;
    &:first-child {
      width: 8px;
      padding: 0;
    }
  }
}
.colpri {
  color: var(--primary);
}
.custom1 {
  cursor: pointer;
}
.entry {
  margin-right: 12px;
  background-color: var(--primary30);
}
.entry:hover {
  background-color: var(--primary30);
}
.r-talent-box {
  padding: 24px;
  .r-talent-action {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    .search-box {
      padding: 42px 24px 0 24px;
      input {
        width: 80%;
      }
      select {
        width: 80%;
      }
      .search-box-item {
        // margin-right: 24px;
        margin-bottom: 24px;
        p {
          color: #636363;
          font-size: 14px;
          margin-bottom: 12px;
        }
        .input {
          width: 268px;
        }
      }
    }
    .triangle {
      position: absolute;
      top: -30px;
      left: 208px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid #fff;
    }
    .drawer {
      width: calc(100vw - 278px);
      background: #fff;
      box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
      z-index: 99;
      height: 278px;
      position: absolute;
      top: 50px;
    }
  }
  ::v-deep .ant-table-thead {
    display: none;
  }
  .table-tr {
    flex: 1;
    display: flex;
    margin: 16px 0 0 24px;
    .t-row {
      .t-col {
        margin-bottom: 16px;
        color: #767885;
        .t-label {
          width: 70px;
          color: #a6a8b4;
          display: inline-block;
        }
        .t-content {
          display: inline-block;
        }
        .t-remark {
          max-width: 84%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
      .display {
        display: flex;
      }
      .t-name {
        display: flex;
        font-size: 10px;
        line-height: 27px;
        .t-status {
          height: 20px;
          line-height: 20px;
          border-radius: 2px;
          text-align: center;
          margin-top: 4px;
          margin-right: 14px;
        }
        .isEmergency {
          width: 26px;
          background: #ffa940;
          color: #fff;
        }
        .isEmp {
          width: 36px;
          border: 1px solid #32ccaa;
          color: #32ccaa;
        }
        .isBroker {
          width: 46px;
          border: 1px solid #4686ff;
          color: #4686ff;
        }
        .idData {
          width: 56px;
          border: 1px solid #ffbb00;
          color: #ffbb00;
        }
        .t-name-font {
          font-size: 18px;
          font-weight: 500;
          color: #3c3d43;
          margin-right: 14px;
          max-width: 24%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .t-desc {
          width: 76%;
          font-size: 12px;
          display: flex;
          align-items: center;
          .t-name-address {
            display: inline-block;
            max-width: 80%;
            overflow: hidden;
            padding-right: 4px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .tableAction {
  }
}
.overflows {
  vertical-align: bottom;
  display: inline-block;
  overflow: hidden;
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}
</style>
